<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>后台显示所有用户的意见反馈</title>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/bootstrap-table.css}">
    <script type="text/javascript" th:src="@{/webjars/jquery/3.3.1/jquery.js}"></script>
    <script type="text/javascript" th:src="@{/webjars/bootstrap/3.3.7/js/bootstrap.js}"></script>
    <script type="text/javascript" th:src="@{/bootstrap-table.js}"></script>
    <script type="text/javascript" th:src="@{/bootstrap-table-locale-all.js}"></script>
    <script type="text/javascript" th:src="@{/bootstrap-table-zh-CN.js}"></script>
</head>
<body>
<table id="table"></table>


<!--当点击回复弹出模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    回复用户意见
                </h4>
            </div>
            <div class="modal-body">
                回复内容:
                <textarea rows="10" cols="30" name="replyContent" id="replyContent"></textarea> <br/>
                <input type="hidden" id="userAdviceId" name="userAdviceId" />
                <form method="post" id="myForm">
                    是否后期跟踪:
                    <label> <input type="radio" value="1" name="isUpperTracker" class="isUpperTracker"/> 是</label>&nbsp;&nbsp;<label> <input type="radio" name="isUpperTracker" value="0" class="isUpperTracker"/>否</label><br/>
                    设置级别：
                    <input type="radio" value="1" name="infoLovel" class="infoLovel" />1 &nbsp;&nbsp;
                    <input type="radio" value="2" name="infoLovel" class="infoLovel" />2 &nbsp;&nbsp;
                    <input type="radio" value="3" name="infoLovel" class="infoLovel" />3 &nbsp;&nbsp;
                    <input type="radio" value="4" name="infoLovel" class="infoLovel" />4 &nbsp;&nbsp;
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" id="saveEditUserAdvice">
                    确定
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
</body>
<script type="text/javascript">
    $(function(){
        //创建bootstrapTable
        $("#table").bootstrapTable({
            method:"POST",
            //极为重要，缺失无法执行queryParams，传递page参数
            contentType : "application/x-www-form-urlencoded",
            dataType:"json",
            url:'findALlUserAdvice',
            queryParams:queryParam,
            pagination:true,//显示分页条：页码，条数等
            striped:true,//隔行变色
            pageNumber:1,//首页页码
            pageSize:10,//分页，页面数据条数
            uniqueId:"id",//Indicate an unique identifier for each row
            sidePagination:"server",//在服务器分页
            responseHandler:responseHandler,
            height:500,
            toolbar:"#toolbar",//工具栏
            columns : [{
                checkbox:"true",
                field : "box"
            },  {
                title : "编号",
                field : "id",//(拿实体类的属性)
                visible: false //(隐藏)
            }, {
                title : "用户编号",
                field : "userId",
                visible: false //(隐藏)
            }, {
                title : "所属用户",
                field : "user.nickName"
            }, {
                title : "电话",
                field : "contactWay"
            },  {
                title : "意见内容",
                field : "advice",//(拿实体类的属性)
            }, {
                title : "意见级别(由低到高)",
                field : "infoLevel",
                align : 'center',
            }, {
                title : "是否后期跟踪(由低到高)",
                field : "isUpperTracker",
                align : 'center',
            }, {
                title : "是否已审核",
                field : "shenHeStatus",
                align : 'center',
                formatter:function(value, row, index){
                    if(value==1){
                        return '<span style="background-color: gold">已审核</span>';
                    }
                    if(value==0){
                        return '<span style="background-color: chartreuse">未审核</span>';
                    }
                }
            }, {
                title : "反馈日期",
                field : "createTime"
            },{
                field : 'operate',
                title : '操作',
                formatter:function(value, row, index){
                    return '<button name="replyUserAdvice" class="btn btn btn-danger btn-sm" data-toggle="modal" data-target="#myModal" onClick="replyAdvice(\''+row.id+'\');"><span class="glyphicon glyphicon-trash">&nbsp;</span>回复</button>';
                }
            }],
            showRefresh : true,//刷新
        });
    });
    
    function replyAdvice(adviceId) {
        $("#userAdviceId").val(adviceId);
    }

    function responseHandler(res) {
        console.log(res);
        console.log(res.result.list);
        if (res.errorCode=='OK') {
            return {
                "rows" : res.result,
                "total" : res.result.total
            };
        } else {
            return {
                "rows" : [],
                "total" : 0
            };
        }
    }
    function queryParam(params) {
        var param = {
            limit : this.limit, // 页面大小
            offset : this.offset, // 页码
            pageNumber : this.pageNumber,
            pageSize : this.pageSize
        };
        return param;
    }
</script>
<script type="text/javascript">
    $(function(){
       $("#saveEditUserAdvice").click(function(){
           //获取回复内容
           var replyContent = $("#replyContent").val();
           //获取意见编号
           var userAdviceId = $("#userAdviceId").val();
           $.ajax({
              url:"/saveEditUserAdvice/"+replyContent+"_"+userAdviceId,
              method:"POST",
              data: $("#myForm").serialize(), //获取表单序列化
              dataType: "json",
              success:function(dt){
                  console.log(dt);
                  $("#myModal").modal("hide");
              }
           });
        });
    });
</script>
</html>